<template>
  <div>
    <div ref="dowebok" class="dowebok" id="dowebok">
      <!-- 注册 -->
      <div class="form-container sign-up-container">
        <form action="#">
          <h1>注册</h1>
          <div class="social-container">
            <a href="#" class="social">
              <img style="width: 32px;height: 32px" src="./img/weichart.svg" alt="">
            </a>
            <a href="#" class="social"><img style="width: 32px;height: 32px" src="./img/QQ.svg" alt=""></a>
            <a href="#" class="social"><img style="width: 32px;height: 32px" src="./img/dingding.svg" alt=""></a>
          </div>
          <span>或使用邮箱注册</span>
          <input tabindex="1" type="text"  @blur="validUserName()" placeholder="请输入用户名" v-model="loginForm.username">
          <span v-show="userNameInputTip != ''" style="color: red">*{{userNameInputTip}}</span>
          <input  tabindex="2" type="password" @blur="validPassword()" placeholder="请输入密码" v-model="loginForm.password">
          <span  v-show="passwordInputTip != ''" style="color: red">*{{passwordInputTip}}</span>
          <input tabindex="3" @blur="validPassword()" type="password"  v-model="loginForm.confirm" placeholder="请确认密码">
          <span  v-show="passwordInputTip != ''" style="color: red">*{{passwordInputTip}}</span>
          <button
                   @click="handleRegister()">注册</button>
        </form>
      </div>


      <!-- 登录 -->
      <div class="form-container sign-in-container">
        <form action="#" ref="form">
          <h1>登录</h1>
          <div class="social-container">
            <a href="#" class="social"><img style="width: 32px;height: 32px" src="./img/weichart.svg" alt=""></a>
            <a href="#" class="social"><img style="width: 32px;height: 32px" src="./img/QQ.svg" alt=""></a>
            <a href="#" class="social"><img style="width: 32px;height: 32px" src="./img/dingding.svg" alt=""></a>
          </div>
          <span>或使用您的帐号</span>
          <input tabindex="1" @blur="validUserName1()" type="text" v-model="loginForm.username" placeholder="请输入用户名">
          <span v-show="userNameInputTip != ''" style="color: red">*{{userNameInputTip}}</span>
          <input tabindex="2"   @blur="validPassword1()" type="password" show-password="" v-model="loginForm.password" placeholder="请输入密码">
         <span  v-show="passwordInputTip != ''" style="color: red">*{{passwordInputTip}}</span>

          <div style="display: flex;flex-direction:row;justify-content: space-around;align-content: space-evenly">
            <input tabindex="3" v-model="loginForm.validCode" type="text" style="width: 50%;margin-left: -2px" placeholder="验证码 ">
            <valid-code @input="createValidCode"  style="margin-top:7px"></valid-code>
          </div>
          <a href="#">忘记密码？</a>
          <button @keyup.enter.native="handleLogin()"
                  @click="handleLogin()">登录
          </button>
        </form>
      </div>
      <div class="overlay-container">
        <div class="overlay">
          <div class="overlay-panel overlay-left">
            <h1>已有帐号？</h1>
            <p>请使用您的帐号进行登录</p>
            <button class="ghost" @click="signIn" id="signIn">登录</button>
          </div>
          <div class="overlay-panel overlay-right">
            <h1>没有帐号？</h1>
            <p>立即注册加入我们，和我们一起开始旅程吧</p>
            <button class="ghost" @click="signUp" id="signUp">注册</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import validate from '@/utils/validate'
  import ValidCode from "../../../components/ValidCode";
  import router from "../../../router";

  export default {
    name: "LoginAndRegister",
    components: {ValidCode,validate},
    data() {
      return {
        forms:{ username: '',
          password: '',},
        confirm:'',
        validCode: '',
        container: null,
        loginForm: {
          username: '',
          password: '',
          validCode:''

        },
        isLoginAccess: {
          username: false,
          passwaord: false,
        },
        userNameInputTip: '',
        passwordInputTip: '',

      }
    },
    created() {

    },
    mounted() {
      this.container = this.$refs.dowebok
    },
    methods: {
      //获取验证码
      createValidCode(data) {
        this.validCode = data
      },
      signIn() {
        this.container.classList.remove('right-panel-active')
      },
      signUp() {
        this.container.classList.add('right-panel-active')
      },
      //登录密码校验
      validPassword1(){
        let str = this.loginForm.password.trim()
        let flag = false
        let msg = ''
        if (str.length >= 6) {
          flag = true
          msg = ''
        } else if (0 < str.length && str.length < 6) {
          flag = false
          msg = '请输入6位以上的密码'
        } else {
          flag = false
          msg = '请输入密码'
        }
        this.isLoginAccess.username = flag
        if (flag) {
          // 写提示信息
          this.passwordInputTip = ''
        } else {
          this.passwordInputTip = msg
        }
      },

      //登录用户名校验
      validUserName1() {
        let str = this.loginForm.username.trim()
        let flag = false
        let msg = ''
        if (str.length >= 3) {
          flag = true
          msg = ''
        } else if (0 < str.length && str.length < 6) {
          flag = false
          msg = '请输入3位以上的用户名'
        } else {
          flag = false
          msg = '请输入用户名'
        }
        this.isLoginAccess.username = flag
        if (flag) {
          // 写提示信息
          this.userNameInputTip = ''
        } else {
          this.userNameInputTip = msg
        }
      },

      //注册校验
      validPassword(){
        let str = this.forms.password.trim()
        let flag = false
        let msg = ''
        if (str.length >= 6) {
          flag = true
          msg = ''
        } else if (0 < str.length && str.length < 6) {
          flag = false
          msg = '请输入6位以上的密码'
        } else {
          flag = false
          msg = '请输入密码'
        }
        this.isLoginAccess.username = flag
        if (flag) {
          // 写提示信息
          this.passwordInputTip = ''
        } else {
          this.passwordInputTip = msg
        }
      },

      //登录用户名校验
      validUserName() {
        let str = this.forms.username.trim()
        let flag = false
        let msg = ''
        if (str.length >= 3) {
          flag = true
          msg = ''
        } else if (0 < str.length && str.length < 6) {
          flag = false
          msg = '请输入3位以上的用户名'
        } else {
          flag = false
          msg = '请输入用户名'
        }
        this.isLoginAccess.username = flag
        if (flag) {
          // 写提示信息
          this.userNameInputTip = ''
        } else {
          this.userNameInputTip = msg
        }
      },


//注册
handleRegister(){

  if (true) {
    if(this.loginForm.password!=this.loginForm.confirm){
      this.$message({

        message: "两次密码输入不一致",
        type: 'error',

      })
      return
    }
    request.post("/users/register",this.loginForm).then(res=>{

      if (res.code ===20000) {
        this.$message({
          message: '注册成功',
          type: 'success',

        });
        //this.$router.replace({path:'/login'}) //登录成功之后进行页面跳转
        // this.forms.username=''
        // this.forms.password=''
        // this.forms.confirm=''
      }
      else {
        this.$message({

          message: '用户名或密码重复',
          type: 'error',

        })
      }
    })
  }
},
      //登录接口
      handleLogin() {

          if (true) {
            if (!this.loginForm.validCode) {
              this.$message.warning("请填写验证码")
              return
            }
            if (this.loginForm.validCode.toLowerCase() !== this.validCode.toLowerCase()) {
              this.$message.error("验证码错误")
              return
            }
            request.post("/users/login", this.loginForm).then(res => {
              this.$store.dispatch('user/login', this.loginForm)
                .then(() => {
                    this.$router.push({path: this.redirect || '/', query: this.otherQuery})
                    this.loading = false
                    this.$message({type: 'success', message: '登录成功'})
                    // 缓存用户信息
                    sessionStorage.setItem("user", JSON.stringify(res.data))
                  }
                )
                .catch(() => {
                  this.$message({type: 'warning', message: '用户名或密码错误'})
                })
            })
          }
      }
    }
  }
</script>

<style scoped>
  * {
    box-sizing: border-box;
  }

  body {
    font-family: 'Montserrat', sans-serif;
    background: #f6f5f7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: -20px 0 50px;
  }

  h1 {
    font-weight: bold;
    margin: 0;
  }

  p {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .5px;
    margin: 20px 0 30px;
  }

  span {
    font-size: 12px;
  }

  a {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    margin: 15px 0;
  }

  .dowebok {
    background: #fff;
    position: relative;
    overflow: hidden;
    width: auto;
    max-width: 100%;
    min-height: 480px;
    margin: 0 auto;
  }

  .form-container form {
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .social-container {
    margin: 20px 0;
  }

  .social-container a {
    border: 1px solid #ddd;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
  }

  .social-container a:hover {
    background-color: #eee;
  }

  .form-container input {
    background: #eee;
    border: none;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
    outline: none;
  }

  button {
    border-radius: 20px;
    border: 1px solid #ff4b2b;
    background: #ff4b2b;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
    cursor: pointer;
  }

  button:active {
    transform: scale(.95);
  }

  button:focus {
    outline: none;
  }

  button.ghost {
    background: transparent;
    border-color: #fff;
  }

  .form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all .6s ease-in-out;
  }

  .sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
  }

  .sign-up-container {
    left: 0;
    width: 50%;
    z-index: 1;
    opacity: 0;
  }

  .overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform .6s ease-in-out;
    z-index: 100;
  }

  .overlay {
    background: #ff416c;
    background: linear-gradient(to right, #ff4b2b, #ff416c) no-repeat 0 0 / cover;
    color: #fff;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateY(0);
    transition: transform .6s ease-in-out;
  }

  .overlay-panel {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    height: 100%;
    width: 50%;
    text-align: center;
    transform: translateY(0);
    transition: transform .6s ease-in-out;
  }

  .overlay-right {
    right: 0;
    transform: translateY(0);
  }

  .overlay-left {
    transform: translateY(-20%);
  }

  /* Move signin to right */
  .dowebok.right-panel-active .sign-in-container {
    transform: translateY(100%);
  }

  /* Move overlay to left */
  .dowebok.right-panel-active .overlay-container {
    transform: translateX(-100%);
  }

  /* Bring signup over signin */
  .dowebok.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
  }

  /* Move overlay back to right */
  .dowebok.right-panel-active .overlay {
    transform: translateX(50%);
  }

  /* Bring back the text to center */
  .dowebok.right-panel-active .overlay-left {
    transform: translateY(0);
  }

  /* Same effect for right */
  .dowebok.right-panel-active .overlay-right {
    transform: translateY(20%);
  }

</style>
